<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>carKeyboard</title>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/jqToast.js" type="text/javascript"></script>
    <style>
        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 0;
            padding: 0;
        }

        html, body {
            margin: 0 auto;
            padding: 0 auto;
            height: 100%;
            -webkit-text-size-adjust: 100%;
            background-color: #CDF7FF;
        }

        div#single-keyboard-box, div#mixed-keyboard-box {
            height: 40%;
            bottom: 0;
            position: fixed;
            width: 100%;
            left: 0;
            /*box-shadow: 1px -1px 1px 1px #f0f0f0;*/
            background-color: #CDF7FF !important;
            border-color: #CDF7FF !important;
        }

        .remind_title {
            text-align: center;
            padding-top: 33.3%;
            font-size: 2em;
            font-weight: bold;
            /*text-shadow: 0 0 1px #FFF;*/
        }

        .top60 {
            height: 60%;
            margin: 0;
            padding: 0;
            background: url('images/tcc_startingBg.png') no-repeat center;
            background-size: cover;
        }
    </style>
    <script>
        function goBinding(carNo) {
            alert(carNo);
        }
    </script>
</head>
<body>
<div class="top60"></div>
<div id="mixed-keyboard-box">
    <mixed-keyboard :args="args" :callbacks="callbacks"></mixed-keyboard>
</div>
<script src="js/MixedKeyboard.js" type="text/javascript"></script>
</body>
<script>
    function native_callback_changed(isCompleted, number) {
//        console.log("当前车牌[变更]：" + number + ", 已完成:" + isCompleted);
        var num = (number.length);
        var $input = $("ul#inputrow>li.cell>button");
        $input.each(function (i, item) { //已输入的框的变色
            var $item = $(item);
            if (i < num) {
                $item.css({"background-color": "blue", "color": "white"});
            } else {
                $item.css({"background-color": "white", "color": "#000"});
            }
        });
    }

    function native_callback_completed(number, isAutoCompleted) {
//        console.log("当前车牌[完成]：" + number + ", 自动完成:" + isAutoCompleted);
        goBinding(number);
    }

    function native_callback_show_message(message) {
        jqOpenToast(message);
    }
</script>
</html>